<template>
  <div class="ly-bill">
    <el-button  @click="addBill">新增</el-button>
    <div class="ly-search">
      
      <div class="ly-li">
        <span class="ly-label">创建时间</span>
        <el-date-picker v-model="search.createTime" type="date" placeholder="选择日期">
        </el-date-picker>
      </div>
      <div class="ly-li">
        <span class="ly-label">客户账号</span>
        <input type="text" class="ly-input" v-model="search.mobile" placeholder="请填写客户账号" maxlength="12"/>
      </div>
      <div class="ly-li">
        <span class="ly-label">客户分类</span>
        <el-select v-model="search.userType" placeholder="全部">
          <el-option v-for="item in client" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </div>
      <div class="ly-btn"  @click="changeClient">搜索</div>  
    </div>
    
    <div class="ly-table">
      <el-table :data="tableData" style="width: 100%" :max-height="maxHeight" border>
        <el-table-column fixed prop="id" label="序号" width=""></el-table-column>
        <el-table-column prop="billName" label="账单名称" width=""></el-table-column>
        <el-table-column prop="mobile" label="账号" ></el-table-column>
        <el-table-column fixed="right" label="操作" width="220">
          <template slot-scope="scope">
            <el-link  target="_blank" :href="tableData[scope.$index].billUrl" :underline="false" style="margin-left:15px">
            <span class="ly-btn" >下载文件</span>
            </el-link>
            <span class="ly-btn" @click="deleteBill(scope.$index,tableData,'delete')">删除</span>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog :visible.sync="dialogFormVisible">
      <el-form
        ref="dataForm"
        :model="bill"
        label-position="left"
        label-width="150px"
        style="width: 600px; margin-left:50px;"
      >

        <el-form-item label="客户:"  size="small">
            <el-select v-model="bill.userId" filterable placeholder="请选择" @change="setbill">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.mobile"
              :value="item.id">
            </el-option>
        </el-select>
        </el-form-item>
        <el-form-item label="账单:"  size="small">
          <el-upload
            class="upload-demo"
            :action="action"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :before-upload="beforeAvatarUpload"
            :on-success="handleAvatarSuccess"
            multiple
            :limit="1"
            :on-exceed="handleExceed"
            :file-list="fileList">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip"></div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false" size="small" class="button">取消</el-button>
        <el-button
          type="primary"
          @click="submit"
          size="small"
          class="button"
        >确认</el-button>
      </div>
    </el-dialog>
    <listPage :pageData="pageList" v-if="pageList.totalRecNum >  pageList.pageSize" @getdata="setPageNo"></listPage>
  </div>
</template>

<script>
  import config from '@/config'
  import {billAdd,getPageList,billDelete} from "@/api/bill"
  import {findAll} from '@/api/user'
  export default {
    name: "bill",
    data() {
      return {
        customer:'',
        fileList: [],
        action: config.baseURL + '/upload/uploadBill',
        pageList: {
          page: 1, //当前页
          totalRecNum: 10,   //总页数
          pageSize: 10 , // 分页条数
          params:{
            createTime:'',
            userType:'',
            mobile:''
          }
        }, // 分页
        maxHeight: 500,
        search: {
          createTime: '',
          mobile: '',
          userType: ''
        },
        client: [
          {
            value: '0',
            label: '全部'
          }, {
            value: '1',
            label: '微信'
          },{
            value: '2',
            label: '注册'
          }],
        tableData: [],
        dialogFormVisible:false,
        bill:{
          mobile:'',
          billName:'',
          billUrl:'',
          userId:''
        },
        options:[]
      }
    },
    methods: {
      setbill(data){
        var obj = {};
        obj = this.options.find(function(item){
          return item.id === data
        });
        this.bill.userId = obj.id
        this.bill.mobile = obj.mobile
      },
      // 所有用户信息
      findAllUser() {
        findAll().then(response => {
          let result = response.data
          if (result.code === '0000') {
            this.options = result.data
          }
        })
      },
      // 分页信息
      getPageList() {
        var data = this.pageList
        getPageList(data).then(response => {
          console.log(response)
          let result = response.data
          if (result.code === '0000') {
            this.tableData = result.data.list 
          }else{
            this.$message.success(result.msg)
            this.tableData = ''
          }
        })
      },
      //新增账单
      addBill(){
        this.dialogFormVisible = true;
      },
      //搜索
      changeClient() {
        
        this.pageList.params.createTime = this.$moment(this.search.createTime).format('YYYY-MM-DD')
        this.pageList.params.userType = this.search.userType
        this.pageList.params.mobile = this.search.mobile
        let data = this.pageList
        console.log(data)
        getPageList(data).then(response => {
          
          if (response.data != null && response.data.data != null) {
            this.tableData = response.data.data.list
          }else{
            this.tableData = ''
          }
        })
      },
      // 下载文件
      downBill(val, rows) {
        console.log(rows[val])
      },
      //删除
      deleteBill(val, rows){
        billDelete(rows[val].id).then(response => {
          let result = response.data
          if (result.code === '0000') {
            this.$message.success(result.msg) 
            this.getPageList()
          }
        })
      },
      // 获取到的 pageNo
      setPageNo(val) {
        this.pageList.page = val
        // 请求 page页的数据
      },
      // 获取屏幕高度 给tbale设置最大高度
      getHeight() {
        let vm = this, height = 0
        height = document.documentElement.clientHeight - 265
        vm.maxHeight = height
      },
      handleAvatarSuccess(res, file) {
        this.bill.billName = res.data.billName
        this.bill.billUrl = res.data.billUrl
      },
      beforeAvatarUpload(file) {
        const isLt2M = file.size / 1024 / 1024 < 10
        if (!isLt2M) {
          this.$message.error('上传文件大小不能超过 10MB!')
        }
        return isLt2M;
      },
      submit() {
        let data = {}
        data = {
          billUrl: this.bill.billUrl,
          billName: this.bill.billName,
          userId: this.bill.userId,
          mobile: this.bill.mobile
        }
        if (data.billUrl) {
          billAdd(data).then(response => {
            let result = response.data
            if (result.code === '0000') {
              this.$message.success(result.msg)
              this.bill.billName = ''
              this.bill.billUrl = ''
              this.bill.userId =''
              this.bill.mobile = ''
              this.dialogFormVisible = false
              this.getPageList()
            } else {
              this.$message.error(result.msg)
            }
          })
        }
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      }
    },
    created() {
      this.getHeight()
      this.findAllUser()
      this.getPageList()
    }
  }
</script>

<style scoped>

</style>